<template>
    <div class="searchForm">
        <el-form :inline="true" class="demo-form-inline">
            <slot name="searcContent"></slot>
            <el-form-item>
                <div class="qureyOperation">
                    <slot name="searchBtn"></slot>
                </div>

            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue';
</script>

<style lang='scss' scoped>
.searchForm {
    width: 100%;
    background-color: $white;
    border-radius: 5px;
    margin: 10px 0px;
    padding: 0px 0px 10px 0px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .el-form {
        min-height: 30px;
        margin: 0px 0px;
    }

    ::v-deep(.el-form-item) {
        margin-bottom: 0px !important;
        margin-top: 10px;
        margin-right: 0px;
    }

    ::v-deep(.el-form-item__label) {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px
    }

    ::v-deep(.el-form-item__content) {
        width: 180px;
    }

    .qureyOperation {
        width: 230px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


.demo-form-inline .el-input {
    --el-input-width: 180px;
}

.demo-form-inline .el-select {
    --el-select-width: 180px;
}
</style>